<template>
  <div class="main-form">
    <el-form>
      <el-form-item label="收件人邮箱">
        <el-input v-model="addressee"></el-input>
      </el-form-item>
      <el-form-item label="邮件主题">
        <el-input v-model="subject"></el-input>
      </el-form-item>
      <el-form-item label="正文">
        <el-input type="textarea" v-model="text"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="send_email">发送邮件</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addressee: "", // 收件人地址
      subject: "", // 邮件主题
      text: "" // 正文
    };
  },
  methods: {
    async send_email() {
      // 匿名登陆
      await this.$app
        .auth({
          persistence: "session"
        })
        .anonymousAuthProvider()
        .signIn()
        .then(res => {
          console.log(res); // 登录成功
        })
        .catch(err => {
          console.log(err); // 登录失败
        });

      // 调用云函数发送邮件
      await this.$app
        .callFunction({
          name: "send_email",
          data: {
            addressee: this.addressee, // 收件人地址
            subject: this.subject, // 邮件主题
            text: this.text // 正文
          }
        })
        .then(res => {
          this.$message.success("发送成功！");
          console.log(res);
        })
        .catch(err => {
          this.$message.error("发送失败！");
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
  .main-form {
    width: 30%;
    margin: 50px auto;
    text-align: center;
  }
</style>
